import { View } from "@tarojs/components";
import { Arrow, Fire } from "@taroify/icons";
import { strToArray } from "@/utils";
import { RenderFireIcon } from "@/utils/render";
import { Avatar } from "@taroify/core";

interface UserBarProps {
  color?: string;
  width?: string;
  user?: {
    avatar: string;
    userName: string;
    signature: string;
  };
}

export default ({
  color = "#2A3763",
  user = {
    avatar: "https://img.yzcdn.cn/vant/cat.jpeg",
    userName: "瑶瑶混日子",
    signature: "不用紧张，我会兜底，sdasdasdasdasdasdasd",
  },
}: UserBarProps) => {
  const tags =
    "1260人聊过xxxxxxxxxxxxxxxxx，游戏角色xxxxxxxx,游戏角色xxxx,游戏角色,游戏角色,游戏角色";
  return (
    <View
      style={{ backgroundColor: color }}
      className="inline-flex opacity-70 text-xs mr-2  justify-between rounded-2xl shadow  w-72 p-5"
    >
      <View className="flex gap-3 items-center">
        <Avatar src={user.avatar} size="large" />

        <View className="flex flex-col gap-1">
          <View className="text-base text-white">{user.userName}</View>
          <View className="flex gap-2">
            {strToArray(tags)
              .slice(0, 2)
              .map((item) => {
                return RenderFireIcon(item);
              })}
          </View>
          <View className="max-w-48 bg-gradient-to-r p-1 from-[#192541] to-[#293662] rounded-bl-xl truncate text-white text-sm">
            {user.signature}
          </View>
        </View>
      </View>
      <View className="p-1 flex justify-center items-center h-4 w-4 rounded-full bg-[#4D5C7B]">
        <Arrow color="#fff" />
      </View>
    </View>
  );
};
